<extend name="Public/common" />
<block name="content">
<div class="row">
	<div class="col-md-10 col-md-offset-1 m-b-md">
		<nav class="navbar m-t bg-white no-br">
			<div class="container-fluid">
			    <div class="navbar-header">
			      	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#user-music-menu">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
			      	</button>
				</div>

				<div class="collapse navbar-collapse" id="user-music-menu">
			      	<ul class="nav navbar-nav">
				        <li class="mb-10 dk"><a class="white-color yellow-bg " href="<{:U('Fav/index')}>">歌曲收藏</a></li>
						<li class="mb-10"><a href="<{:U('Fav/album')}>">专辑收藏</a></li>
				        <li class="mb-10"><a href="<{:U('Fav/artist')}>">音乐人收藏</a></li>
			      	</ul>
				</div>
			</div>
		</nav>
		<div class="row">
			<div class="col-md-12 ">
						<if condition="$list">
						<div class="bg-dark dker">							
							<div id="jp_container_N" >			                    
			                    <div class="jp-type-playlist">
			                      	<div class="jp-jplayer hide" id="jplayer_N" style="width: 480px; height: 270px;"></div>
			                      	<div class="jp-gui">
				                        <div class="jp-interface">
				                          <div class="jp-controls">
				                            <div><a class="jp-previous"><i class="fa fa-backward i-lg"></i></a></div>
				                            <div>
				                              <a class="jp-play" style="display: inline-block;"><i class="fa fa-play i-2x"></i></a>
				                              <a class="jp-pause hid" style="display: none;"><i class="fa fa-pause i-2x"></i></a>
				                            </div>
				                            <div><a class="jp-next"><i class="fa fa-forward i-lg"></i></a></div>
				                            <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
				                            <div><a data-target="#playlist" data-toggle="dropdown" class=""><i class="icon-list"></i></a></div>
				                            <div class="jp-progress hidden-xs">
				                              <div class="jp-seek-bar dk" style="width: 0%;">
				                                <div class="jp-play-bar bg-info" style="width: 0%;">
				                                </div>
				                                <div class="jp-title text-lt" style="display: none;"></div>
				                              </div>
				                            </div>
				                            <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted">00:00</div>
				                            <div class="hidden-xs hidden-sm jp-duration text-xs text-muted">00:00</div>
				                            <div class="hidden-xs hidden-sm">
				                              <a title="mute" class="jp-mute"><i class="fa fa-volume-up"></i></a>
				                              <a title="unmute" class="jp-unmute hid" style="display: none;"><i class="fa fa-volume-off"></i></a>
				                            </div>
				                            <div class="hidden-xs hidden-sm jp-volume">
				                              <div class="jp-volume-bar dk">
				                                <div class="jp-volume-bar-value lter" style="width: 80%;"></div>
				                              </div>
				                            </div>
				                            <div>
				                              <a title="单曲重复" class="jp-repeat"><i class="fa fa-retweet text-muted"></i></a>
				                              <a title="关闭重复" class="jp-repeat-off hid" style="display: none;"><i class="fa fa-retweet text-lt"></i></a>
				                            </div>
				                            <div class="hide">
				                              <a title="full screen" class="jp-full-screen"><i class="fa fa-expand"></i></a>
				                              <a title="restore screen" class="jp-restore-screen" style="display: none;"><i class="fa fa-compress text-lt"></i></a>
				                            </div>
				                          </div>
				                        </div>
			                    	</div>
									<div class="jp-no-solution" style="display: none;">
										<span>需要更新</span>
										要发挥媒体你需要安装最新版本的浏览器或更新您的
										<a target="_blank" href="http://get.adobe.com/flashplayer/">Flash插件</a>
										.
									</div>
			                    </div>
			                </div>
						</div>        			                                 
		                
		                <ul class="list-group list-group-lg no-radius no-border m-t-n-xxs m-b-none auto b-white">
			                 <volist name="list" id="v"> 
			                 <li class="list-group-item">
			                 	<div class="pull-right m-l">
	                    	<a class="m-r-sm music-action-btn" href="#" data-id="<{$v['id']}>" data-action="like"><i class="fa fa-heart text-danger-lter lt i-md"></i></a>
	                    	<a class="m-r-sm music-action-btn" href="#" data-id="<{$v['id']}>" data-action="recommend"><i class="fa fa-thumbs-up text-danger-lter i-md"></i></a>
	                    	<a class="m-r-sm music-action-btn" href="#" data-id="<{$v['id']}>" data-action="delfav" remove-parent=".list-group-item" ><i class="fa fa-times  text-danger-lter i-md"></i></a>
			                 	</div>
			                    <a class="jp-play-me m-r-sm pull-left" href="#" data-id="<{$v.id}>">			                     	
			                    	<i class="fa fa-play-circle-o i-md text"></i>
			                    	<i class="fa fa-pause i-md text-active"></i>
			                    </a>
			                 	<div class="clear text-ellipsis play_name"><{$v.name}></div>
			                 </li>
			                 </volist> 
		                </ul>
		             	<div class="list-page text-center">
		             		<ul class="pagination">
							<{$_page}>
							</ul>
						</div>           	
	                  	<else />
	                  		还没有收藏音乐！
	                  	</if>
            	</div> 
			</div>
		
		</div>
		
	</div>
</div>
</block>
<block name="script">
  <script type="text/javascript" src="__STATIC__/player/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="__STATIC__/player/jy_play.js"></script>
</block>